<template>
  <div class="list">
    <div class="nav-top">
      <van-nav-bar title="首页" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="add" @click="addClick">新增任务</div>
    <div class="opts">
      <div class="all">全部任务({{ store.tasklist.length }})</div>
      <div class="finished">已完成({{store.finish}})</div>
      <div class="unfinished">未完成({{store.tasklist.length-store.finish}})</div>
    </div>
    <div class="tasklist">
      <p>任务列表</p>
      <div
        :class="{ item: true, unfinished: !item.status }"
        v-for="(item, index) in store.tasklist"
        :key="index"
      >
        <input
          :checked="item.status"
          type="checkbox"
          @click="opClick(item.id)"
        />
        <div class="id">{{ item.id }}</div>
        <div class="name">{{ item.name }}</div>
        <div class="remove" @click="del(item.id)">删除</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { useStore } from "../stores/tasklist";

let $router = useRouter();
let store = useStore();
const onClickLeft = () => history.back();

let addClick = () => {
  $router.push("/add");
};

let opClick = (id) => {
  store.changeStatus(id);
};

let del = (id) => {
  store.remove(id);
};

onMounted(() => {
    console.log(store.finish);
}); 
</script>
<style scoped>
.add {
  width: 80px;
  text-align: center;
  line-height: 50px;
  color: #15a6a9;
  margin-left: 10px;
  border: 1px solid #15a6a9;
}
.opts {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  /* background-color: aquamarine; */
}
.opts div {
  height: 30px;
  line-height: 30px;
  color: white;
  padding: 0 10px;
  margin-right: 10px;
  border-radius: 5px;
  background-color: #15a6a9;
}
.opts .unfinished {
  background-color: red;
}
.tasklist {
  padding: 0 10px;
}
p {
  font-weight: 700;
  line-height: 50px;
}
.item {
  height: 40px;
  color: white;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #15a6a9;
  margin-bottom: 10px;
}
.unfinished {
  background-color: red;
}
input,
.id {
  margin-right: 30px;
}
.name {
  flex: 1;
}
</style>